<!-- nav -->
<div th:fragment="header-nav">
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh"><span class="navicon"></span></h2>
            <div class="logo"><a href="/cmsEnglish/index.html">英语练习系统</a></div>
            <!--导航-->
            <nav>
                <ul id="starlist">
                    <!--          <li><a th:href="@{/blog/index.html}">首页</a></li>-->


                    <!--          <li class="wow fadeInLeft"  th:each="category:${@cms.selectNavCategories()}"  th:if="${category.parentId==null||category.parentId==0}">-->
                    <!--            <a th:href="${category.frontUrl}" class="in-nav"><span th:text="${category.categoryName}"></span></a>-->
                    <!--            <div class="sub-nav"  >-->
                    <!--              <a th:href="${childCategory.frontUrl}" th:each="childCategory:${@cms.selectNavCategories()}"  th:if="${childCategory.parentId==category.categoryId}"><span th:text="${childCategory.categoryName}"></span></a>-->
                    <!--            </div>-->
                    <!--          </li>-->

                    <li th:class="${tree.children != null && tree.children.size() > 0} ? 'menu' : ''"
                        th:each="tree:${@englishService.listTree()}">
                        <a th:href="${tree.url}" th:text="${tree.title}"></a>
                        <ul class="sub" th:if="${tree.children != null && tree.children.size() > 0}">
                            <li th:each="childTree:${tree.children}">
                                <a th:href="${childTree.url}" th:text="${childTree.title}"></a>
                            </li>
                        </ul>
                        <span></span>
                    </li>

                    <li><a th:href="@{/cmsEnglish/about.html}">帮助</a></li>
                </ul>
                <!--       <ul id="starlist">-->
                <!--           <li>11113323</li>-->
                <!--           <li>11113323</li>-->
                <!--           <li>11113323</li>-->
                <!--      </ul>-->
            </nav>
            <th:block th:include="include-user-nav :: user-nav" />
    </header>
    <header style="background: white;"
            th:if="${category != null && category.children != null && category.children.size() > 0}">
        <div style="width: 1200px;margin: auto; overflow: hidden;margin-bottom:1px;">
            <a th:href="${categoryItem.url}" style="padding-left: 10px" th:each="categoryItem:${category.children}"
               th:text="${categoryItem.name}"></a>
        </div>
    </header>


    <!--  <div class="searchbox">-->
    <!--    <div class="search">-->
    <!--      <form action="/e/search/index.php" method="post" name="searchform" id="searchform">-->
    <!--        <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onFocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onBlur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">-->
    <!--        <input name="show" value="title" type="hidden">-->
    <!--        <input name="tempid" value="1" type="hidden">-->
    <!--        <input name="tbname" value="news" type="hidden">-->
    <!--        <input name="Submit" class="input_submit" value="搜索" type="submit">-->
    <!--      </form>-->
    <!--    </div>-->
    <!--    <div class="searchclose"></div>-->
    <!--  </div>-->

</div>

<div th:fragment="footer">
    <footer>
        <div class="box">
            <!--      <div class="wxbox">-->
            <!--        <ul>-->
            <!--          <li><img src="/skin/jxhx/images/wxgzh.jpg"><span>微信公众号</span></li>-->
            <!--          <li><img src="/skin/jxhx/images/wx.png"><span>我的微信</span></li>-->
            <!--        </ul>-->
            <!--      </div>-->
            <div class="endnav">
                <!--        <p><b>站点声明：</b></p>-->
                <!--        <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>-->
                <!--        <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=dacesmiling@qq.com" target="_blank">dacesmiling@qq.com</a></p>-->
                <!--        <p>Copyright © <a href="http://www.usefullc.com" target="_blank">www.usefullc.com</a> All Rights Reserved. 备案号：<a href="http://www.miitbeian.gov.cn/" target="_blank">湘ICP备2021006309号-11</a></p>-->
                <p>Copyright © <a href="http://www.usefullc.com" target="_blank">www.usefullc.com</a> All Rights
                    Reserved. </p>
            </div>
        </div>
    </footer>
</div>

<div th:fragment="seo">
    <meta name=viewport
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <meta name="keywords" th:content="${keywords}">
    <meta name="description" th:content="${description}">
    <title th:text="${title}"></title>
</div>

<div th:fragment="header-res">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{/blog/css/base.css}" rel="stylesheet">
    <link th:href="@{/blog/css/m.css}" rel="stylesheet">
    <link th:href="@{/blog/css/message.css}" rel="stylesheet">
    <link th:href="@{/blog/css/tab.css}" rel="stylesheet">

    <link th:href="@{/blog/css/jquery.my-modal.1.1.winStyle.css}" type="text/css" rel="stylesheet">

    <!-- CSS only -->
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">-->

    <script th:src="@{/blog/js/jquery-1.8.3.min.js}"></script>
    <script th:src="@{/blog/js/comm.js}"></script>
    <script th:src="@{/blog/js/message.js}"></script>
<!--    <script th:src="@{/blog/js/ipcRenderer.js}" type="module">-->
<!--    </script>-->
    <script type="module">
        import {$methodCall} from '/blog/js/ipcRenderer.js'
        console.log($methodCall)
    </script>

    <!-- JavaScript Bundle with Popper -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>-->

    <!--[if lt IE 9]>
    <script th:src="@{/blog/js/modernizr.js}"></script>
    <![endif]-->

</div>


<div th:fragment="content-right">

    <div class="rbox">

        <div class="whitebg paihang">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale"><a><img th:src="@{/blog/images/h1.jpg}"><span>生活要点点缀</span></a></section>
            <ul>
                <li th:each="dataItem:${@englishService.readList()}"><i></i><a th:href="${dataItem.url}"
                                                                               th:text="${dataItem.title}"></a></li>
            </ul>
        </div>

        <div class="whitebg tuijian">
            <h2 class="htitle">视频推荐</h2>
            <section class="topnews imgscale"><a><img th:src="@{/blog/images/h2.jpg}"><span>英语要走偏锋</span></a></section>
            <ul>
                <li th:each="dataItem:${@englishService.recommendList()}">
                    <a th:href="${dataItem.url}"><i><img th:src="${dataItem.imgUrl}"></i>
                        <p th:text="${dataItem.title}"></p>
                    </a>
                </li>

            </ul>
        </div>

        <!--    <div class="ad whitebg imgscale">-->
        <!--      <ul>-->
        <!--        <a href="/"><img  th:src="@{/blog/images/ad.jpg}"></a>-->
        <!--      </ul>-->
        <!--    </div>-->

        <div class="whitebg cloud">
            <h2 class="htitle">标签云</h2>
            <ul>
                <a th:href="${'/cmsEnglish/tag/'+dataItem.id+'.html'}" target="_blank"
                   th:each="dataItem:${@englishService.tagList()}" th:text="${dataItem.name}"></a>
                <!--        <a href="" target="_blank">css动画</a>-->
                <!--        <a href="" target="_blank">布局</a>-->
                <!--        <a href="" target="_blank">今夕何夕</a>-->
                <!--        <a href="" target="_blank">SEO</a> <a href="" target="_blank">女程序员</a> <a href="" target="_blank">小世界</a> <a href="" target="_blank">个人博客</a> <a href="" target="_blank">网页设计</a>-->
            </ul>
        </div>

        <!--    <div class="whitebg wenzi">-->
        <!--      <h2 class="htitle">猜你喜欢</h2>-->
        <!--      <ul>-->
        <!--        <li><a href="/">十条设计原则教你学会如何设计网页布局!</a></li>-->
        <!--        <li><a href="/">用js+css3来写一个手机栏目导航</a></li>-->
        <!--        <li><a href="/">6条网页设计配色原则,让你秒变配色高手</a></li>-->
        <!--        <li><a href="/">三步实现滚动条触动css动画效果</a></li>-->
        <!--        <li><a href="/">个人博客，属于我的小世界！</a></li>-->
        <!--        <li><a href="/">安静地做一个爱设计的女子</a></li>-->
        <!--        <li><a href="/">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</a></li>-->
        <!--        <li><a href="/">做个人博客如何用帝国cms美化留言增加头像选择</a></li>-->
        <!--      </ul>-->
        <!--    </div>-->

        <!--    <div class="ad whitebg imgscale">-->
        <!--      <ul>-->
        <!--        <a href="/"><img  th:src="@{/blog/images/ad02.jpg}"></a>-->
        <!--      </ul>-->
        <!--    </div>-->

        <!--    <div class="whitebg tongji">-->
        <!--      <h2 class="htitle">站点信息</h2>-->
        <!--      <ul>-->
        <!--        <li><b>建站时间</b>：2018-10-24</li>-->
        <!--        <li><b>网站程序</b>：帝国cms</li>-->
        <!--        <li><b>主题模板</b>：<a href="http://www.yangqq.com" target="_blank">《今夕何夕》</a></li>-->
        <!--        <li><b>文章统计</b>：299条</li>-->
        <!--        <li><b>文章评论</b>：490条</li>-->
        <!--        <li><b>统计数据</b>：<a href="/">百度统计</a></li>-->
        <!--      </ul>-->
        <!--    </div>-->
    </div>
</div>


<div th:fragment="content-left-menu">

    <div class="lbox-s">

        <div class="whitebg left-menu">
            <h2 class="htitle">菜单</h2>
<!--            <section class="topnews imgscale"><a><img th:src="@{/blog/images/h1.jpg}"><span>生活要点点缀</span></a></section>-->
            <ul>
                <li> <a th:href="@{/cmsEnglish/userCenter.html}">个人信息</a> </li>
                <li> <a th:href="@{/cmsEnglish/userCenter.html}">我的单词</a> </li>
                <li> <a th:href="@{/cmsEnglish/userCenter.html}">我的收藏</a> </li>
                <li> <a th:href="@{/cmsEnglish/settings.html}">系统设置</a> </li>
            </ul>
        </div>







    </div>
</div>


<div th:fragment="content-right-info">

    <div class="rbox">
        <div class="whitebg tuijian">
            <h2 class="htitle">内容笔记</h2>
            <!--      <section class="topnews imgscale"><a><img  th:src="@{/blog/images/h2.jpg}"><span>技术要走偏锋</span></a></section>-->
            <ul style="height: 50px; overflow-y: auto;">
                <!--                <li th:each="dataItem:${@englishService.categoryContentList(content.categoryId)}">-->
                <!--                    <a th:href="${dataItem.url}"><i><img  th:src="${dataItem.imgUrl}"></i>-->
                <!--                        <p th:text="${dataItem.title}"></p>-->
                <!--                    </a>-->
                <!--                </li>-->
            </ul>
        </div>

        <div class="ant-tabs-nav ant-tabs-nav-animated">
            <div>
                <div role="tab" aria-disabled="false" listId="subtitleList" data-index="0"
                     class="ant-tabs-tab-active ant-tabs-tab">
                    字幕
                </div>
                <div role="tab" aria-disabled="false" listId="videoList" data-index="1" class=" ant-tabs-tab">
                    视频列表
                </div>
            </div>
            <div id="tabArticle" class="ant-tabs-ink-bar ant-tabs-ink-bar-animated tabs-active1-style">
            </div>
        </div>

        <div class="whitebg subtitle tabList" id="subtitleList">
            <!--            <h2 class="htitle">字幕-->

            <!--&lt;!&ndash;                <input type="checkbox" style="margin-left:5px" id="chkSubtitleAutoFocus" onclick="setPlayerOptions('subtitleAutoFocus',this)"> 自焦&ndash;&gt;-->

            <!--            </h2>-->
            <h2 class="qtitle" style="text-align:left">
                <input type="checkbox" style="margin-left:1px" id="chkShowCnText"
                       onclick="setPlayerOptions('showCnText',this)"> 中文
                <input type="checkbox" style="margin-left:5px" id="chkShowEnText"
                       onclick="setPlayerOptions('showEnText',this)"> 英文
                <select style="margin-left:10px" id="selCycleNum" onchange="selCycleNum(this)">
                    <option value="-1">无限循环</option>
                    <option value="2">循环2次</option>
                    <option value="3">循环3次</option>
                    <option value="4">循环4次</option>
                    <option value="5">循环5次</option>
                </select>
                <select style="margin-left:10px" id="selSubtitlePracticeLevel"
                        onchange="selSubtitlePracticeLevel(this)">
                    <option value="">掌握程度</option>
                    <option value="0">未知</option>
                    <option value="1">容易</option>
                    <option value="2">一般</option>
                    <option value="3">困难</option>
                </select>
                <select style="margin-left:10px" id="selSubtitleCollect" onchange="selSubtitleCollect(this)">
                    <option value="">收藏</option>
                    <option value="0">未收藏</option>
                    <option value="1">已收藏</option>
                </select>
                <!--                <input type="checkbox" style="margin-left:5px" id="chkQuerySubtitleCollect" > 收藏-->
                <!--                <input type="button" value="定位" style="margin-left:10px" onclick="subtitleFocus()">-->

            </h2>
            <!--      <section class="topnews imgscale"><a><img  th:src="@{/blog/images/h1.jpg}"><span>生活要点点缀</span></a></section>-->
            <ul style="height: 500px; overflow-y: auto;" id="subtitleBlock">
                <!--                <li th:each="dataItem:${@englishService.subtitleList(content.id)}" ondblclick="jumpToTime(this)" th:data="${dataItem.startTimeMs}"><i></i>-->
                <!--                    <span th:text="${dataItem.gmtStart}"></span>-->
                <!--                    <a onclick="correctSubtitle(this)" th:data="${dataItem.id}" class="inputsub-subtitle">纠正</a>-->
                <!--                    <a onclick="setSubtitlePracticeLevel(this)" th:data="${dataItem.id}" th:value="${dataItem.practiceLevel}" class="inputsub-subtitle-practice" th:text="${dataItem.practiceLevelEnum.text}">难度</a>-->
                <!--                    <a onclick="subtitleCollect(this)" th:data="${dataItem.id}" th:value="${dataItem.collect}" class="inputsub-subtitle-collect" th:text="${dataItem.collect==1?'已收藏':'未收藏'}">收藏</a>-->
                <!--                    <p><a th:text="'中文：'+${dataItem.cnText}" href="javascript:void(0)"></a></p>-->
                <!--                    <p>英文：<a th:each="singleWordDict:${dataItem.singleWordDictList}" type="en" th:text="${singleWordDict.name}+' '"  th:word="${singleWordDict.name}" th:specialChar="${singleWordDict.specialChar}" href="javascript:void(0)"  onclick="showWordDictModal(this)" ></a>-->
                <!--                    </p>-->
                <!--                </li>-->
            </ul>
        </div>

        <div class="whitebg tuijian tabList" id="videoList" style="display: none">
            <!--            <h2 class="htitle">视频列表</h2>-->
            <!--      <section class="topnews imgscale"><a><img  th:src="@{/blog/images/h2.jpg}"><span>技术要走偏锋</span></a></section>-->
            <ul style="height: 500px; overflow-y: auto;">
                <li th:each="dataItem:${@englishService.categoryContentList(content.categoryId)}">
                    <a th:href="${dataItem.url}"><i style="width:auto"><img th:src="${dataItem.imgUrl}"></i>
                        <p th:text="${dataItem.title}"></p>
                    </a>
                </li>

            </ul>
        </div>

    </div>
    <script>
        $(document).ready(function () {
            let $tabArticle = $('#tabArticle');
            $('.ant-tabs-tab').on('click', function () {
                //删除选中的样式
                $('.ant-tabs-tab').removeClass("ant-tabs-tab-active")
                //线条移动
                $tabArticle.css({
                    "transform": "translate3d(" + $(this).attr('data-index') * 110 + "px, 0px, 0px)"
                });
                let listId = $(this).attr("listId");
                // console.log("listId="+listId);
                $(".tabList").hide();
                $("#" + listId).show();
                //选中tab样式
                this.classList.add("ant-tabs-tab-active")
            });
        });
    </script>
</div>


<div th:fragment="pager">
    <div id="pageGroup" class="pagelist" th:if="${pager.totalPage>1}">
        <span class="pageinfo">共&nbsp;<strong>[[${pager.totalPage}]]</strong>&nbsp;页<strong>[[${pager.total}]]</strong>&nbsp;条记录</span>
        <a th:href="${category.url}" th:class="${pager.pageIndex == 1 ? 'active':''}">首页</a>
        <!--    <a th:if="${pager.pageIndex > 1}"  class="prepage nopage">上页</a>-->
        <a th:if="${pager.pageIndex > 2}" th:href="${category.urlPrefix}+'-'+${pager.pageIndex-1}+'.html'"
           class="pagelist_active">上页</a>

        <a th:if="${pager.totalPage>2}" th:each="item:${#numbers.sequence(2,pager.totalPage-1)}"
           th:href="${category.urlPrefix}+'-'+${item}+'.html'" class="listpage" th:text="${item}"
           th:class="${pager.pageIndex == item ? 'active':''}"></a>

        <a th:if="${pager.pageIndex < pager.totalPage -1}"
           th:href="${category.urlPrefix}+'-'+${pager.pageIndex+1}+'.html'" class="nextpage">下页</a>
        <!--    <a th:if="${pager.pageIndex == pager.totalPage}" class="nextpage nopage">下页</a>-->
        <a th:href="${category.urlPrefix}+'-'+${pager.totalPage}+'.html'"
           th:class="${pager.pageIndex == pager.totalPage ? 'active':''}">尾页</a>
    </div>
</div>
